<template>
  <div>
    <el-dialog class="dia_addressBu" title="地址簿" append-to-body :close-on-click-modal="closeOnclickModal"
               width="66%" top="3vh" :visible.sync="isDialogShow" @close="close">
      <el-form :inline="true" :model="searchForm" ref="searchForm" @keyup.enter.native="search" :size="size">
        <el-form-item label="模糊搜索" prop="keyWord">
          <el-input v-model="searchForm.keyWord" placeholder="请输入手机、姓名或地址" clearable></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
        <el-button icon="el-icon-plus" :size="size" @click="addAddr">添加</el-button>
      </el-form>
      <el-table width="100%" max-height="380" border :data="dataList" @row-click="selAddr">
        <el-table-column prop="" header-align="center" align="left" label="" width="38">
          <template slot-scope="{row}">
            <el-radio v-model="selAddrInfo.id" :label="row.id">{{""}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="contact" header-align="center" align="center" label="姓名" min-width="100"></el-table-column>
        <el-table-column prop="mobile" header-align="center" align="center" label="电话" width="160" show-overflow-tooltip></el-table-column>
        <el-table-column prop="contact" header-align="center" align="left" label="地址" min-width="180" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{zhiXiaShi.includes(row.province) ? '': row.province}}{{row.city}}{{row.county}}{{row.town}} {{row.address}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center"
                         width="150" label="操作">
          <template slot-scope="{row}">
            <i class="el-icon-star-on" :class="{'isDefault': row.isDefault == '1'}" @click="setDefaultAddr(row)"></i>
            <el-button type="text" size="small" @click.stop="editAddr(row)">编辑</el-button>
            <el-button type="text" size="small" style="color: #e66613" @click="delAddr(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.current" :limit.sync="searchForm.size" @pagination="getDataList" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" :size="size">取消</el-button>
        <el-button type="primary" @click="submit" :size="size">确定</el-button>
      </span>
    </el-dialog>
    <EditAddressModal :addrDialogShow.sync="addrDialogShow" :propAddrInfo="propAddrInfo" @refreshData="getDataList"></EditAddressModal>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import api from '@/utils/api.js'
  import Pagination from '@/components/Pagination'
  import EditAddressModal from '@/components/EditAddressModal'
  export default {
    name: 'DialogAddressBu',
    components: {
      Pagination,
      EditAddressModal
    },
    props: {
      dialogAddressBuShow: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        searchForm: {
          keyWord: '',
          current: 1,
          size: 10
        },
        dataList: [],
        total: 0,
        selAddrInfo: {
          id: ''
        },
        isDialogShow: false,
        addrDialogShow: false,
        propAddrInfo: {}
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal', 'zhiXiaShi'])
    },
    watch: {
      dialogAddressBuShow (newValue) {
        this.isDialogShow = newValue
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        api.getAddress(this.searchForm).then((res) => {
          if (res) {
            let {records, total} = res.data
            this.dataList = records
            this.total = total
          }
        }).catch((res) => {
        })
      },
      // 查询
      search () {
        this.searchForm.current = 1
        this.getDataList()
      },
      // 设为默认地址
      setDefaultAddr (row) {
        let params = JSON.parse(JSON.stringify(row))
        params.isDefault = '1'
        api.saveAddress(params).then(res => {
          row.isDefault = '1'
          this.$message.success('设置默认寄件地址成功')
          this.getDataList()
        })
      },
      // 删除地址
      delAddr (row) {
        let id = row.id
        this.delConfirm().then(() => {
          api.delAddress({id}).then(res => {
            this.$message.success('删除成功')
            this.getDataList()
          })
        })
      },
      selAddr (row) {
        this.selAddrInfo = row
      },
      editAddr (row) {
        Object.assign(this.propAddrInfo, row)
        this.addrDialogShow = true
      },
      addAddr () {
        this.propAddrInfo = {}
        this.addrDialogShow = true
      },
      // 确定
      submit () {
        if (!this.selAddrInfo.id) {
          this.$message.warning('请选择地址')
          return
        }
        this.$emit('submitSelAddr', this.selAddrInfo)
        this.close()
      },
      close () {
        this.$emit('update:dialogAddressBuShow', false)
      },
    }
  }
</script>

<style lang="scss">
  .dia_addressBu {
    .el-radio__label {
      padding-left: 0;
    }
    .pagination-container {
      padding: 15px 0 0 0;
    }
    .el-pagination {
      text-align: right;
    }
    .el-icon-star-on {
      margin-right: 5px;
      &.isDefault {
        color: #409eff;
      }
    }
  }
</style>
